/*divs dentro del header*/

header {
  background-color: #FFFFFF;
  overflow: hidden;
  display: flex;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 48px 0 0 0;
  top:0;
  left:0;
}
@media screen and (max-width:800px){
  header{
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    background-position: center; background-repeat: no-repeat; background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
  }
}

.div-1 {
  position: relative;
  overflow: hidden;
  width: 50%;
  .div-1, img{
   margin-left: 5%;
   margin-top: 20%;
   max-width: 80%;
   height: auto;
 }
 img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
 }

 .linea-inclinada {
  top: 0;
  left: 25%;
  width: 5px;
  height: auto;
  position: relative;
  transform: rotate(25deg);
  transform-origin: left top;
  background-color: #ccb370;
 }

.div-2 {
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10%;
  .div-2, img{
    top: 0;
    right: 0;
    max-width: 100%;
    height: auto;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  }
}

/*hr para el header style*/

.hr-header{
  border: 0;
  max-width: 100%;
  background-position: 50%;
  margin-left: 5%;
}
.hr-header{
  height: 20px;
  width: 100%;
  background-image: radial-gradient(
  farthest-side at 50% -50%,
    hsla(0, 0%, 0%, 0.5),
    hsla(0, 0%, 0%, 0));
  position: relative; 
}
.hr-header::before {
  height: 1px;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background-image: linear-gradient(
    90deg,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0.75) 50%,
    hsla(0, 0%, 0%, 0));
}

/*@media para el header*/

 @media screen and (max-width:800px){
   .div-1 {
     width: 100%;
   }
  .linea-inclinada {
    display: none;
  }
   .img-div1{
    display: none;
  }
  .hr-header{
    display: none;
  }
   .div-2{
     display: none;
   }
 }

/*CSS texto comunidad de vecinos*/

.div-textoheader {
  width: 90%;
  display: flex;
  align-items: center;
  margin-top: 10%;
  margin-left: 10%;
}

.div-textoheader h1{
  z-index: 1;
  margin: 0;
  font-size: 2.8vw;
  letter-spacing: 1px;
  color: rgba(225,225,225, .01);
  background-image: url("../imagenes/banderamelilla.jpg");
  background-repeat: repeat;
  -webkit-background-clip:text;
  animation: animate 20s ease-in-out infinite;
  text-align: center;
  text-transform: uppercase;
  font-weight: 999;
}

@media screen and (max-width:800px){
  .div-textoheader{
    width: 100%;
    margin: 0;
  }
  .div-textoheader h1{
    font-size: 8vmin;
    filter: brightness(1.2);/* Mas brillo al texto header */
  }
}
  @keyframes animate {
    0%, 100% {
      background-position: left top;
    }
    25%{
      background-position: right bottom;
     }
    50% {
      background-position: left bottom;
    }
    75% {
      background-position: right top;
    }   
}